<template>
  <div class="emergency-contact">
    <div class="module-title">
      <div class="title-icon">📞</div>
      <div class="title-text">应急联系信息</div>
    </div>
    
    <div class="contact-container">
      <!-- 医疗急救 -->
      <div class="contact-section medical">
        <div class="section-header">
          <i class="icon">🏥</i>
          <span class="section-title">医疗急救</span>
        </div>
        <div class="contact-list">
          <div class="contact-item" v-for="contact in medicalContacts" :key="contact.id">
            <div class="contact-role">{{ contact.role }}</div>
            <div class="contact-info">
              <span class="contact-name">{{ contact.name }}</span>
              <span class="contact-phone">
                <i class="phone-icon">📱</i>
                {{ contact.phone }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 安全管理 -->
      <div class="contact-section safety">
        <div class="section-header">
          <i class="icon">🛡️</i>
          <span class="section-title">安全管理</span>
        </div>
        <div class="contact-list">
          <div class="contact-item" v-for="contact in safetyContacts" :key="contact.id">
            <div class="contact-role">{{ contact.role }}</div>
            <div class="contact-info">
              <span class="contact-name">{{ contact.name }}</span>
              <span class="contact-phone">
                <i class="phone-icon">📱</i>
                {{ contact.phone }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 项目管理 -->
      <div class="contact-section project">
        <div class="section-header">
          <i class="icon">👔</i>
          <span class="section-title">项目管理</span>
        </div>
        <div class="contact-list">
          <div class="contact-item" v-for="contact in projectContacts" :key="contact.id">
            <div class="contact-role">{{ contact.role }}</div>
            <div class="contact-info">
              <span class="contact-name">{{ contact.name }}</span>
              <span class="contact-phone">
                <i class="phone-icon">📱</i>
                {{ contact.phone }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 设备维护 -->
      <div class="contact-section equipment">
        <div class="section-header">
          <i class="icon">🔧</i>
          <span class="section-title">设备维护</span>
        </div>
        <div class="contact-list">
          <div class="contact-item" v-for="contact in equipmentContacts" :key="contact.id">
            <div class="contact-role">{{ contact.role }}</div>
            <div class="contact-info">
              <span class="contact-name">{{ contact.name }}</span>
              <span class="contact-phone">
                <i class="phone-icon">📱</i>
                {{ contact.phone }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EmergencyContact',
  data() {
    return {
      // 医疗急救联系人
      medicalContacts: [
        { id: 1, role: '医疗主管', name: '张医生', phone: '138-8888-1001' },
        { id: 2, role: '急救队长', name: '王队长', phone: '138-8888-1002' }
      ],
      
      // 安全管理联系人
      safetyContacts: [
        { id: 1, role: '安全总监', name: '李总监', phone: '138-8888-2001' },
        { id: 2, role: '安全主管', name: '赵主管', phone: '138-8888-2002' }
      ],
      
      // 项目管理联系人
      projectContacts: [
        { id: 1, role: '项目经理', name: '刘经理', phone: '138-8888-3001' },
        { id: 2, role: '项目总监', name: '陈总监', phone: '138-8888-3002' }
      ],
      
      // 设备维护联系人
      equipmentContacts: [
        { id: 1, role: '设备主管', name: '周主管', phone: '138-8888-4001' },
        { id: 2, role: '维护工程师', name: '吴工', phone: '138-8888-4002' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.emergency-contact {
  height: 100%;
  padding: 15px;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .module-title {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;

    .title-icon {
      font-size: 20px;
      margin-right: 8px;
    }

    .title-text {
      font-size: 16px;
      font-weight: bold;
      color: #50e3c2;
    }
  }

  .contact-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(80, 227, 194, 0.3);
      border-radius: 2px;

      &:hover {
        background: rgba(80, 227, 194, 0.5);
      }
    }

    &::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 2px;
    }
  }

  .contact-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    flex-shrink: 0;

    &:hover {
      background: rgba(0, 0, 0, 0.3);
      border-color: rgba(80, 227, 194, 0.3);
    }

    &.medical {
      border-left: 3px solid #ff4757;
    }

    &.safety {
      border-left: 3px solid #ffa726;
    }

    &.project {
      border-left: 3px solid #42a5f5;
    }

    &.equipment {
      border-left: 3px solid #66bb6a;
    }

    .section-header {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .icon {
        font-size: 14px;
      }

      .section-title {
        font-size: 13px;
        font-weight: 600;
        color: #8ab4f8;
      }
    }

    .contact-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .contact-item {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 6px 8px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 3px;
      transition: all 0.2s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.08);
      }

      .contact-role {
        font-size: 11px;
        color: #999;
        font-weight: normal;
      }

      .contact-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;

        .contact-name {
          font-size: 12px;
          color: #fff;
          font-weight: 500;
        }

        .contact-phone {
          display: flex;
          align-items: center;
          gap: 3px;
          font-size: 11px;
          color: #50e3c2;
          font-family: 'Consolas', 'Courier New', monospace;

          .phone-icon {
            font-size: 10px;
          }
        }
      }
    }
  }
}
</style>

